<template>
  <view>
    <view class="container">
      <u-navbar title="添加商品" title-size="36"></u-navbar>
      <view class="top">
        <!-- <view class="view-item1">
						<text class="need">*</text>
						<p>营业状态</p>
						<u-switch v-model="checked"></u-switch>
					</view> -->
        <view class="view-item1">
          <text class="need">*</text>
          <p>商品分类</p>
          <text v-if="cateValue">{{ cateValue.name }}</text>
          <text v-else style="color: #999999">选择</text>
          <!-- <u-icon style="margin-left: 10rpx;" name="/static/img/more.png" size="15"></u-icon> -->
        </view>
        <view class="view-item1">
          <text class="need">*</text>
          <p class="title">商品名称</p>
          <input v-model="form.name" type="text" placeholder="请输入商品名称" />
        </view>
        <view class="view-item1">
          <p class="title">品牌</p>
          <input v-model="form.introduction" type="text" placeholder="请输入品牌" />
        </view>

        <view class="view-item1" @click="routeTo(2, '/other_center/mer-goods-sku/mer-goods-sku')">
          <text class="need">*</text>
          <p>商品规格</p>
          <text style="color: #999999">选择</text>
          <u-icon style="margin-left: 10rpx" name="/static/img/more.png" size="15"></u-icon>
        </view>
      </view>

      <view class="content">
        <view class="">
          <view class=""> 商品主图</view>
          <u-upload max-count="1" :file-list="fileList1" :action="action" ref="uUpload1"></u-upload>
          <view class=""> 商品轮播图</view>
          <view class="">
            <view class="" style="display: flex; flex-wrap: wrap">
              <view
                class=""
                style="position: relative"
                v-for="(item, index2) in picUrls"
                :key="index2"
              >
                <view class="img-del" @click="delImg(index2)">
                  <u-icon name="close" color="#fff" size="21"></u-icon>
                </view>
                <image
                  :src="item"
                  style="width: 200rpx; height: 200rpx; margin: 10rpx; border-radius: 15rpx"
                  mode=""
                ></image>
              </view>
            </view>

            <u-upload :action="action" ref="uUpload2"></u-upload>
          </view>
          <!-- <u-upload :custom-btn="true">
						<view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
							<u-icon v-for="item in fileList2" :key="item.url" :name="item.url" size="150" :color="$u.color['lightColor']"></u-icon>
						</view>
					</u-upload> -->
        </view>
        <!-- <view class="view-item1" @click="onPicker('region')">
					<text class="need">*</text>
					<p class="title">营销活动</p>
					<p v-if="region" style="flex: 7;" ></p>
					<text v-else style="color:#999999" >请选择</text>
					<u-icon style="margin-left: 10rpx;" name="/static/img/more.png" size="15"></u-icon>
				</view>

				<view class="view-item1">
					<text class="need">*</text>
					<p class="title">详细地址</p>
					<input type="text" placeholder="请输入详细地址">
				</view> -->
      </view>

      <view class="view-bar">
        <view class="view-item1" @click="routeTo(1, '/other_center/mer-rich-text/mer-rich-text')">
          <text class="need">*</text>
          <p>商品详情</p>
          <!-- <text v-if="rangeValue">{{cateValue.name}}</text> -->
          <text style="color: #999999">请选择</text>
          <u-icon style="margin-left: 10rpx" name="/static/img/more.png" size="15"></u-icon>
        </view>
        <!-- <view class="view-item1"  @click="onPicker('selector')">
						<text class="need">*</text>
						<p>营销活动</p>
						<text v-if="actionValue">{{cationValue.name}}</text>
						<text v-else  style="color:#999999">请选择</text>
						<u-icon style="margin-left: 10rpx;" name="/static/img/more.png" size="15"></u-icon>
					</view> -->
      </view>
    </view>

    <view @click="submit" class="submit-btn" style="margin: 100rpx 20rpx"> 确认保存</view>

    <u-picker
      :mode="mode"
      v-model="show"
      :range="range"
      @confirm="confirmSelctor"
      range-key="name"
    ></u-picker>
  </view>
</template>

<script>
import { BASE_URL, UP_URL } from '@/common/config.js'
import deepClone from 'uview-ui/libs/function/deepClone'

export default {
  data() {
    return {
      mode: 'selector',
      show: false,
      checked: false,
      cateValue: '',
      actionValue: '',
      region: '',
      range: [],
      cateList: [],
      selectType: '',
      fileList1: [],
      fileList2: [],
      action: BASE_URL + UP_URL,
      goodsId: '',
      picUrls: [],
      form: {
        name: '',
        keyword: '体育',
        introduction: '',
        description: '',

        brandId: 0,
        picUrl: '',
        sliderPicUrls: [],
        sort: 1,
        specType: true,
        deliveryTypes: 1,
        deliveryTypes: 1,
        deliveryTemplateId: 6,
        skus: []
      }
    }
  },
  onLoad(res) {
    if (res.goodsInfo) {
      this.form = JSON.parse(res.goodsInfo)
      this.$u.get('/app-api/product/spu/get-detail', { id: this.form.id }).then((res) => {
        res.data.skus.forEach((item) => {
          item.price = (item.price * 0.01).toFixed(2)
        })
        this.form = res.data
        this.picUrls = deepClone(res.data.sliderPicUrls)
        this.fileList1.push({
          url: this.form.picUrl
        })
        // this.form.sliderPicUrls.forEach(item =>{
        // 	this.fileList2.push({
        // 		url: item
        // 	})
        // })
      })
    }

    if (res.cate) {
      this.cateValue = JSON.parse(res.cate)
      //this.form.shopCategoryId = this.cateValue.id
      this.form.categoryId = this.cateValue.id
    }

    // this.$u.get("/app-api/shop/product-category/my-list").then(res=>{
    // 	this.cateList = res.data
    // })
  },
  onShow() {
    // this.$u.get("/app-api/shop/product-category/page").then(res=>{
    // 	this.cateList = res.data.list.sort((a, b) => a.sort - b.sort)
    // })
  },
  methods: {
    confirmSelctor(e) {
      if (this.selectType == 'category') {
        this.cateValue = this.range[e]
        this.form.shopCategoryId = this.range[e].id
      }
    },
    onPicker(e) {
      this.selectType = e
      if (e == 'category') {
        this.range = this.cateList
      }
      this.show = true
    },
    routeTo(e, url) {
      if (e == 1) {
        uni.$on('rich', (res) => {
          this.form.description = res
          uni.$off('rich')
        })

        uni.navigateTo({
          url: url + '?description=' + encodeURIComponent(this.form.description)
        })
        return
      }
      if (e == 2) {
        uni.$on('sku', (res) => {
          this.form.skus = res
          uni.$off('sku')
        })
        uni.navigateTo({
          url: url + '?sku=' + JSON.stringify(this.form.skus)
        })
        return
      }
    },
    delImg(e) {
      this.form.sliderPicUrls.splice(e, 1)
    },
    submit() {
      this.$refs.uUpload1.lists.forEach((val) => {
        if (val.response) {
          this.form.picUrl = val.response.data
        } else {
          this.form.picUrl = val.url
        }
      })
      this.form.sliderPicUrls = []
      this.picUrls.forEach((item) => {
        this.form.sliderPicUrls.push(item)
      })

      this.$refs.uUpload2.lists.forEach((val) => {
        if (val.response) {
          this.form.sliderPicUrls.push(val.response.data)
        } else {
          this.form.sliderPicUrls.push(val.url)
        }
      })

      if (!this.form.name) {
        this.$u.toast('商品名称不能为空')
        return
      }
      // if(!this.form.shopCategoryId){
      // 	this.$u.toast("商品类别不能为空")
      // 	return
      // }
      // if(!this.form.shopCategoryId){
      // 	this.$u.toast("商品类别不能为空")
      // 	return
      // }
      if (this.form.skus.length == 0) {
        this.$u.toast('商品规格不能为空')
        return
      }

      if (!this.form.picUrl) {
        this.$u.toast('商品主图不能为空')
        return
      }
      // if(this.form.sliderPicUrls.length == 0){
      // 	this.$u.toast("商品轮播图不能为空")
      // 	return
      // }
      if (!this.form.description) {
        this.$u.toast('商品详情不能为空')
        return
      }
      this.form.keyword = '体育'
      this.form.brandId = 1
      this.form.deliveryTypes = [0]
      this.form.skus.forEach((item) => {
        item.name = this.form.name
        item.price = item.price * 100
      })

      if (this.form.id) {
        //this.form.shopCategoryId = 0

        this.$u.put('/app-api/product/spu/update', this.form).then((res) => {
          this.$u.toast('成功')
          uni.navigateBack()
        })
      } else {
        //this.form.shopCategoryId = 0
        this.$u.post('/app-api/product/spu/create', this.form).then((res) => {
          this.$u.toast('成功')
          uni.navigateBack()
        })
      }
    }
  }
}
</script>

<style>
@import url(../../style/btn.css);

page {
  background-color: #f2f2f2;
  font-size: 30rpx;
}

.top {
  background-color: #fff;
  margin-bottom: 20rpx;
}

.need {
  color: red;
}

.view-item1 {
  display: flex;
  align-items: center;
  padding: 20rpx;
  border-bottom: 2rpx solid #ededed;
}

.view-item1 p {
  flex: 1;
}

.view-item1 .title {
  flex: 2;
}

input {
  flex: 8;
}

.view-bar {
  background-color: #fff;
  margin-bottom: 20rpx;
}

.floor {
  padding: 20rpx;
  background-color: #fff;
}

.content {
  padding: 20rpx;
  background-color: #fff;
  margin-bottom: 20rpx;
}

.container {
  padding: 20rpx;
}

.slot-btn {
  width: 329rpx;
  height: 140rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgb(244, 245, 246);
  border-radius: 10rpx;
}

.slot-btn__hover {
  background-color: rgb(235, 236, 238);
}

.img-del {
  position: absolute;
  right: 20rpx;
  top: 20rpx;
  background-color: #fa3534;
  width: 44rpx;
  height: 44rpx;
  border-radius: 44rpx;
  z-index: 9;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
